<template>
    <div>
        <div class="resource-manage">
            <div class="card-box">
                <div class="card-title">项目信息</div>
                <div class="sub-box">
                    <div class="card-title">基本信息</div>
                    <el-form ref="propForm" :model="propForm.rentProjectVo" class="form-wrap" label-position="top" size="small" :rules="rentProjectVo_rules">
                        <el-form-item label="物业地址" prop="cityCode" class="full">
                            <el-row :gutter="10">
                                <el-col :span="4">
                                    <el-select placeholder="请选择市" v-model="propForm.rentProjectVo.cityCode">
                                        <el-option
                                            v-for="item in cityAssembly"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="5">
                                    <el-select placeholder="请选择区(县)" v-model="propForm.rentProjectVo.countyCode" @change="handleChangeCountyCode">
                                        <el-option
                                            v-for="item in (this.propForm.rentProjectVo.cityCode === '') ? [] : districtCollection"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="5">
                                    <el-select placeholder="请选择街道(乡)" v-model="propForm.rentProjectVo.projectStreet" @change="handleChangeStreet">
                                        <el-option
                                            v-for="item in (this.propForm.rentProjectVo.countyCode === '') ? [] : streets"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="5">
                                    <el-select placeholder="请选择社区(村)" v-model="propForm.rentProjectVo.communityName">
                                        <el-option
                                            v-for="item in (this.propForm.rentProjectVo.projectStreet === '') ? [] : communityNameStreet"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="5">
                                    <el-input maxlength="25" v-model="propForm.rentProjectVo.addressInfo" placeholder="请输入道路及门牌号" @change="handleValidateProject">
                                    </el-input>
                                </el-col>
                            </el-row>
                        </el-form-item>
                        <el-form-item label="地图坐标" prop="mapCoordinates" style="position: relative;">
                            <button type="button" @click="$refs.positionDialog.show()" style="position: absolute;top: -38px;left: 70px;">选择</button>
                            <el-input v-model="propForm.rentProjectVo.mapCoordinates" placeholder="请输入地图坐标" suffix-icon="el-icon-map-location"></el-input>
                        </el-form-item>
                        <el-form-item label="项目名称" prop="propertyName">
                            <el-input maxlength="25" placeholder="请输入" v-model="propForm.rentProjectVo.propertyName"></el-input>
                        </el-form-item>
                        <el-form-item label="曾用名" prop="usedName">
                            <el-input maxlength="25" placeholder="请输入" v-model="propForm.rentProjectVo.usedName"></el-input>
                        </el-form-item>
                        <el-form-item label="总栋数(栋)" prop="totalBuildings">
                            <el-input type="text" maxlength="25" v-model="propForm.rentProjectVo.totalBuildings" placeholder="请输入总栋数" @blur="handleTotalBuildings"></el-input>
                        </el-form-item>
                        <el-form-item label="建筑面积(m²)" prop="buildArea">
                            <el-input v-model="propForm.rentProjectVo.buildArea" placeholder="请输入建筑面积"></el-input>
                        </el-form-item>
                        <el-form-item label="非经营面积(m²)" prop="unmanagedArea">
                            <el-input v-model="propForm.rentProjectVo.unmanagedArea" placeholder="请输入非经营面积" @blur="handleAreaCompared">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="经营面积(m²)" prop="managedArea" >
                            <el-input v-model="propForm.rentProjectVo.managedArea" placeholder="请输入经营面积" @blur="handleAreaCompared">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="管理权属" prop="manageUnit">
                            <el-select v-model="propForm.rentProjectVo.manageUnit" placeholder="请选择管理所">
                                <el-option
                                    v-for="item in manageUnits"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="占地面积(m²)" prop="floorSpace">
                            <el-input placeholder="请输入占地面积" v-model="propForm.rentProjectVo.floorSpace"></el-input>
                        </el-form-item>
                    </el-form>
                    <div class="card-title">土地信息</div>
                    <el-form
                        ref="rentLandVo"
                        class="form-wrap"
                        label-position="top"
                        size="small"
                        :model="propForm.rentLandVo"
                        :rules="rentLandVo_rules">
                        <el-form-item label="宗地号" prop="parcelNum">
                            <el-input maxlength="30" placeholder="请输入" v-model="propForm.rentLandVo.parcelNum" @change="landCodeOnly" v-if="isAdd"></el-input>
                            <span v-else class="in_txt">{{propForm.rentLandVo.parcelNum}}</span>
                        </el-form-item>
                        <el-form-item label="宗地面积(m²)" prop="parcelArea">
                            <el-input maxlength="30" placeholder="请输入" v-model="propForm.rentLandVo.parcelArea" v-if="isAdd"></el-input>
                            <span v-else class="in_txt">{{propForm.rentLandVo.parcelArea}}</span>
                        </el-form-item>
                        <el-form-item label="土地用途" prop="landUse">
                            <el-select placeholder="请选择" v-model="propForm.rentLandVo.landUse" v-if="isAdd">
                                <el-option
                                    v-for="item in landUses"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                            <span v-else class="in_txt">{{getCardTypeValue(propForm.rentLandVo.landUse,landUses)}}</span>
                        </el-form-item>
                       <!-- <el-form-item label="土地合同号" prop="landContractNum">
                            <el-input maxlength="18" placeholder="有，则填写合同号; 无，则不用填写" v-model="propForm.rentLandVo.landContractNum" v-if="isAdd"></el-input>
                            <span v-else class="in_txt">{{propForm.rentLandVo.landContractNum}}</span>
                        </el-form-item>-->
                        <el-form-item label="地址" prop="addressInfo" class="full">
                            <el-input maxlength="30"  placeholder="请输入" v-model="propForm.rentLandVo.addressInfo" v-if="isAdd"></el-input>
                            <span v-else class="in_txt">{{propForm.rentLandVo.addressInfo}}</span>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
        <div class="resource-manage">
            <div class="card-box">
                <div class="card-title">物业信息</div>
                <div class="table-box">
                    <div class="table-button">
                        <el-button type="text" @click="handleSuperAdd">添加</el-button>
                        <span class="line">|</span>
                        <el-button type="text" @click="handleOpenBusiness">经营调整</el-button>
                        <span class="line">|</span>
                        <el-button type="text" @click="handleOpenSplitRoom">拆分</el-button>
                        <span class="line">|</span>
                        <el-button type="text" @click="handleOpenMergeRoom">合并</el-button>
                        <span class="line">|</span>
                        <el-button type="text" @click="handleSuperEdit">编辑</el-button>
                        <span class="line">|</span>
                        <el-button type="text" @click="handleSuperDelete">删除</el-button>
                    </div>
                    <el-table :data="propForm.rentPropertyVos"  style="width: 100%;" @selection-change="selectionChange" v-if="isRouterAlive">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="serialNumber" label="序号" width="80"></el-table-column>
                        <el-table-column prop="propertyName" label="物业名称" width="120"></el-table-column>
                        <el-table-column prop="buildingArea" label="建筑面积(m²)" width="120"></el-table-column>
<!--                        <el-table-column prop="serviceLife" label="使用期限" :formatter="dataFormat" width="120"></el-table-column>-->
                        <el-table-column prop="projectType" label="用途大类" width="120">
                            <template slot-scope="scope">
                                <span>{{getCardTypeValue(scope.row.projectType,projectTypes)}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="projectSubclassType" label="用途小类" width="120">
                            <template slot-scope="scope">
                                <span>{{getCardTypeValue(scope.row.projectSubclassType,propertyUseTypes)}}</span>
                            </template>
                        </el-table-column>
<!--                        <el-table-column prop="status" label="状态" width="120"></el-table-column>-->
                    </el-table>
                </div>
            </div>
        </div>
        <div class="resource-manage">
            <div class="card-box">
                <div class="card-title">文件上传</div>
                <div style="padding: 20px 20px">
                    <upload-media
                        type="file"
                        ref="myUpload"
                        :url="fileUploadUrl"
                        :busId="propForm.rentProjectVo.projectId"
                        :modelType="modelType"
                        @onSuccess="onSuccess"
                        :propsFileList="uploadFileList"
                        :isView=false>
                    </upload-media>
                </div>
            </div>
        </div>
        <div class="resource-manage">
            <div class="card-box">
                <el-button type="primary" class="propForm-btn" v-throttle="[submitForm]">保存</el-button>
            </div>
        </div>
        <!-- 地图坐标选择弹窗 -->
        <positionDialog ref="positionDialog" @changeMessage="resetPosition"/>
        <!--物业信息弹窗-->
        <propertyInformation ref="propertyInformation" @doProperty="handleClickDoProperty" @doCancel="handleClickDoCancel" :rentPropertyVos="this.propForm.rentPropertyVos" v-if="isComponentAlive"></propertyInformation>
        <splitRoom ref="splitRoom" @doSplit="handleDoSplit"></splitRoom>
        <mergeRoom ref="mergeRoom" v-if="mergeDestroy" @mergeRoomClose="mergeRoomClose" @doMerge="handleDoMerge"></mergeRoom>
        <businessAdjustment ref="businessAdjustment" @businessDetails="handleBusinessAdjustment"></businessAdjustment>
    </div>
</template>

<script src="./rental_edit.js">

</script>

<style scoped lang="scss">

    @include formWrap(4);
    .resource-manage {
        padding: 16px 24px;
        .card-box {
            overflow: hidden;
            .sub-box {
                padding: 20px;
            }
            .table-box {
                padding: 0 20px 20px 20px;
                .table-button {
                    margin: 10px;
                    float: right;
                }
                .line {
                    margin: 0 10px;
                }
                /deep/ .el-table__empty-block {
                    width: 100% !important;
                }
                /deep/ .el-table__empty-text {
                    margin-left: auto;
                    width: 100%;
                }
                /deep/.el-table__header {
                    max-width: 100%!important;
                }
                /deep/.el-table__body {
                    max-width: 100%!important;
                }
            }
            .propForm-btn {
                float: right;
                margin: 20px;
            }
        }
    }
</style>
